﻿<MCard Class="mx-auto"
       Width="256"
       Tile>
    <MNavigationDrawer permanent>
        <MList>
            <MListItem>
                <MListItemAvatar>
                    <MImage Src="https://cdn.masastack.com/stack/images/website/masa-blazor/jack.png"></MImage>
                </MListItemAvatar>
            </MListItem>

            <MListItem Link>
                <MListItemContent>
                    <MListItemTitle class="text-h6">
                        MASA
                    </MListItemTitle>
                    <MListItemSubtitle>john@masablazor.com</MListItemSubtitle>
                </MListItemContent>

                <MListItemAction>
                    <MIcon>mdi-menu-down</MIcon>
                </MListItemAction>
            </MListItem>
        </MList>
        <MDivider></MDivider>
        <MList Nav
               Dense>
            <MListItemGroup @bind-Value="_selectedItem"
                            Color="primary">
                @foreach (var item in _items)
                {
                    <MListItem>
                        <MListItemIcon>
                            <MIcon>@item.Icon</MIcon>
                        </MListItemIcon>

                        <MListItemContent>
                            <MListItemTitle>@item.Text</MListItemTitle>
                        </MListItemContent>
                    </MListItem>
                }
            </MListItemGroup>
        </MList>
    </MNavigationDrawer>
</MCard>

@code{
    private StringNumber _selectedItem = 0;
    private Item[] _items = new Item[]
    {
       new Item { Text= "My Files", Icon= "mdi-folder" },
       new Item { Text= "Shared with me", Icon= "mdi-account-multiple" },
       new Item { Text= "Starred", Icon= "mdi-star" },
       new Item { Text= "Recent", Icon= "mdi-history" },
       new Item { Text= "Offline", Icon= "mdi-check-circle" },
       new Item { Text= "Uploads", Icon= "mdi-upload" },
       new Item { Text= "Backups", Icon= "mdi-cloud-upload" }

    };

    class Item
    {
        public string Text { get; set; }
        public string Icon { get; set; }
    }
}